<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>

<body>

<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>消费历史</b></font></h1>
</header>

<div class="mui-content mui-slider">
	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		<a class="mui-control-item" href="#pay">消费历史</a>
		<a class="mui-control-item" href="#other">其他</a>
	</div>
	<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
	<div class="mui-slider-group" >
		<!--消费历史记录-->
		<div th:id="pay"  class="mui-slider-item mui-control-content ">
			<div th:each="pay:${pay}">
				<div class="weui-cells weui-cell_access" style="margin-top: 0px;">
					<div class="weui-cell" style="line-height:2">
						<div class="weui-cell__hd"><i class="fa fa-bank fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;</div>
						<div class="weui-cell__bd">
							<div class="weui-flex">
								<div class="weui-flex__item" style="flex-grow: 3">
									<h4 style="margin-bottom: 0px" th:text="${pay.chnname}">广工店</h4>
								</div>
								<div class="weui-flex__item" style="flex-grow: 1">
									<p style="margin-bottom: 0px" th:text="${pay.creattime}">2017-10-22</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media" style="line-height: 2">
						<a href="#" >
							<div class="mui-media-body" style="white-space: normal">
								<h4 style="color: grey"><span th:text="${pay.servitemname}">更换机油</span>&nbsp;&nbsp; x 1</h4>
							</div>
						</a>
						<a href="#" >
							<div class="mui-media-body" style="white-space: normal">
								<h4 style="color: grey">消费车辆&nbsp;&nbsp;<span th:text="${pay.carno}">粤A12525</span></h4>
							</div>
						</a>
					</li>
				</ul>
				<div class="weui-cells__title" ></div><!--间隔一下-->
			</div>
		</div>
		<!--其他记录-->
		<div th:id="other"  class="mui-slider-item mui-control-content ">
			<div th:each="other:${other}">
				<div class="weui-cells weui-cell_access" style="margin-top: 0px;">
					<div class="weui-cell" style="line-height:2">
						<div class="weui-cell__hd"><i class="fa fa-bank fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;</div>
						<div class="weui-cell__bd">
							<div class="weui-flex">
								<div class="weui-flex__item" style="flex-grow: 3">
									<h4 style="margin-bottom: 0px" th:text="${other.chnname}">广工店</h4>
								</div>
								<div class="weui-flex__item" style="flex-grow: 1">
									<p style="margin-bottom: 0px" th:text="${other.creattime}">2017-10-22</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media" style="line-height: 2">
						<a href="#" >
							<div class="mui-media-body" style="white-space: normal">
								<h4 style="color: grey" th:if="${other.chgtype=='opencard'}">开卡金额:&nbsp;&nbsp;&nbsp;<span th:text="${other.saleamt}"></span>元</h4>
								<h4 style="color: grey" th:if="${other.chgtype=='closecard'}">退卡金额:&nbsp;&nbsp;&nbsp;<span th:text="${-other.chgval}"></span>元</h4>
							</div>
						</a>
					</li>
				</ul>
				<div class="weui-cells__title" ></div><!--间隔一下-->
			</div>
		</div>
	</div>


	</div>

	<div class="weui-cells__title" align="center">没有再多内容啦</div><!--没有再多内容啦-->


</body>

</html>
